<template>
  <div>
    <div class="pics_list">
      <ul
        v-for="item in imageList"
        :key="item.id"
      >
        <li>
          <a
            href="javascript:void(0);"
            @click="clickFn(item)"
          >
            <img
              :src="item.imgs"
              alt=""
            />
            <p>{{ item.title }}</p>
          </a>
        </li>
      </ul>
    </div>
    <div class="page_list">
      <span>
        共<strong>1</strong>页<strong>{{ totalCount }}</strong>条记录
      </span>
      <a href="javascript:void(0);">首页</a>
      <a href="javascript:void(0);">上页</a>
      <a href="javascript:void(0);">1</a>
      <a href="javascript:void(0);">下页</a>
      <a href="javascript:void(0);">尾页</a>
    </div>
  </div>
</template>

<script>
import { getArticleList } from '../api/article'
export default {
  // props: {
  //   imageList: {
  //     type: Array,
  //     default: () => { },
  //   },
  // },
  data() {
    return {
      arr1: [1, 2, 3, 4, 5, 6, 7, 8, 9],
      imageList: [],
      baseURL: this.baseURL,
      totalCount: 0
    }
  },
  async created() {
    const opt = {
      page: 1,
      per_page: 100,
      channel_id: 4
    }
    await getArticleList(opt).then(res => {
      this.imageList = res.data.data
      this.totalCount = res.data.totalCount
      this.imageList.forEach((item, index) => {
        const imgReg = /<img.*?(?:>|\/>)/gi
        const srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i
        const str = item.content
        const arr = str.match(imgReg)
        const srcArr = []
        if (arr) {
          for (let i = 0; i < arr.length; i++) {
            const src = arr[i].match(srcReg)
            // 获取图片地址
            srcArr.push(src[1])
          }
        }
        this.imageList[index].imgs = srcArr[0]
        if (!this.imageList[index].imgs && !this.imageList[index].image) {
          this.imageList[index].imgs = require('../assets/static.png')
        } else if (!this.imageList[index].imgs) {
          this.imageList[index].imgs = `${this.baseURL}/uploads/${
            this.imageList[index].image.split(',')[0]
          }`
        }
      })
    })
  },
  methods: {
    clickFn(v) {
      this.$router.push({
        path: '/wodexiangce',
        query: {
          id: v.id
        }
      })
      this.$emit('getData')
      // this.$router.go(0);
    }
  }
}
</script>

<style lang="scss" scoped>
@media only screen and (max-width: 480px) {
  body .pics_list ul {
    width: 100%;
  }
  body .page_list {
    font-size: 14px;
    a {
      margin: 0 5px 10px;
      padding: 3px 6px;
    }
  }
}

.pics_list {
  ul {
    width: 25%;
    float: left;
    overflow: hidden;
    li {
      margin: 10px;
      a {
        margin: 0 0 30px 0;
        padding: 12px;
        background: white;
        border-radius: 3px;
        box-shadow: 0px 1px 2px 0px #dddddd;
        display: block;
        img {
          width: 100%;
          margin: 0 auto 10px;
        }
        p {
          color: #666;
          text-align: center;
        }
      }
      a:hover {
        transform: translateY(-5px);
        box-shadow: #dddddd 0px 3px 6px;
        transition: 0.2s;
      }
    }
  }
}
.page_list {
  text-align: center;
  color: #666;
  width: 100%;
  clear: both;
  margin: 0 0 10px;
  a {
    color: #666;
    margin: 0 5px 10px;
    padding: 5px 10px;
    background: #ffffff;
    display: inline-block;
  }
}
</style>
